{% extends 'base_with_top_menu.html' %}

{% load go_back_link %}

{% block title %}Book list{% endblock %}

{% block header %} {% if for_whom %} {{ for_whom }} {% else %} Book list {% endif %} {% endblock %}

{% block content %}
    {% if display_tips %}
    <div class="tip">
      <ol>
        <li><p>If you use Firefox or Opera you can click and drag to multiselect locations. In Chrome you can use CTRL+click. In IE both ways works.</p></li>
        <li><p>Selecting "Any" has effect iff nothing else is selected. If "Any" and sth else is selected, then "Any" would be automatically deselected.</p></li>
      </ol>
    </div>
    {%endif%}

    <div class='content_form'>
        <form action='.' method='post' class="book_search">
            <table class="book_details">
            <tbody>
                <tr class="book_title">
                    <td>Title: <br><input type='text' name='title' value='{{ search.title }}'></td>
                    <td><input type='checkbox' name='title_any' id="title_any" value='any'  {% if search.title_any_checked %} checked {% endif %} >
                        <label for="title_any">Any of keywords</label></td>
                </tr>
                <tr class="book_author">
                    <td>Author: <br><input type='text' name='author' value='{{ search.author }}'></td>
                    <td><input type='checkbox' name='author_any' id="author_any" value='any'  {% if search.author_any_checked %} checked {% endif %} >
                        <label for="author_any">Any of keywords</label></td>
                </tr>
                <tr class="book_category">
                    <td>
                        Category: <br> 
                        <select name='category' multiple='multiple' size='{{ search.categories_select_size }}'>
                            {% for category in search.categories %}
                                <option value='{{ category.id }}' {% if category.selected %}selected{% endif %}>{{ category.name }}</option>
                            {% endfor %}
                        </select>

                      <!-- <input type='text' name='category' value='{{ search.category }}'> -->
                    </td>
                    <td><input type='checkbox' name='category_any' id="category_any" value='any'  {% if search.category_any_checked %} checked {% endif %} >
                        <label for="category_any">Any of keywords</label></td>
                </tr>
                <tr class="book_search">
                    <td></td>
                    <td> <input type='submit' name='action' value='Search'> </td>
                </tr>
            </tbody>
            </table>
        </form>
    </div>

    <div class="book_actions">
      {% if perms.baseapp.add_book %}
      <a href="/entelib/admin/baseapp/book/add/" class="add_book">Add new book</a>
      {% endif %}
      {% go_back_link "Go back" %}
    </div>

    {% if books %}
    
    <script type="text/javascript">
        $(document).ready(function()  { $("#booklist").tablesorter( {sortList: [[1,0]]} ); } );
    </script>

    <div class="found_books">
        <table class="booklist tablesorter" id="booklist">
        <thead>
            <tr class="header">
                <th>Show button</th>
                <th>Title</th>
                <th>Authors</th>
            </tr>
        </thead>
        <tbody>
            {% for book in books %}
            <tr class="book">
                <td class="show"><a href='{{ book.url }}'>Show book</a></td>
                <td class="title">{{ book.title }}</td>
                <td class="authors">{% if book.authors %}{{ book.authors|join:', '}}{% else %}No authors.{% endif %}</td>
            {% endfor %}
            
        </tbody>
        </table>
    </div>
    {% endif %}

    {% if none_found %} 
        <p><b>Sorry, no books.</b></p>
    {% endif %}
    
    {% if display_tips and none_found %}
    <div class="tip tips">
      <p>Why nothing was found? Here are some tips:</p>
      <ul style="margin-top:1em;">
        <li>Use spaces as separators.</li>
        <li>Title, Author and Category are combined with logical AND operator.</li>
        <li>Check your query for typos.</li>
        <li>Check if "Any" checkboxes are ticked properly.</li>
        <li>Your query is too strict.</li>
      </ul>
    </div>
    {% endif %}

{% endblock %}
